
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全文手语翻译手机端</title>
    <meta name="description" content="关爱残疾人，沟通无障碍。">
    <meta name="keyword" content="手语，语料库，残疾人，沟通，无障碍。">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="assets/favicon.ico" rel="icon">
    <link rel="stylesheet" href="component/pear/css/pear.css" />
    <style>
        html, body { background-color: whitesmoke }
        .layui-container { margin: 15px auto 15px auto; }
        .content { min-height: 560px; }
        .nav { text-align: center; }
        .nav button { margin-bottom: 3px; width: 100%; margin-top: 3px; margin-bottom: 3px; border-radius: 1px; }
        .nav button:hover { background-color: #5FB878; border: 1px solid #5FB878; color: white; }
        .layui-card-body { padding: 8px; }
        .layui-card-body .layui-btn + .layui-btn { margin-left: 0px; }
        .video-show { min-height: 300px; }
        .chat-show { min-height: 240px; }
        .layui-input-block { margin-left: 0px; }
    </style>
</head>
<body>   

    <div class="layui-container" id="app">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md4">
                <div class="layui-card video-show">
                    <div class="layui-card-header">手语区</div>
                    <div class="layui-card-body">
                        <div id="example1" style="width:360px;height:202px;border:solid 1px gray"></div>
                        <div style="padding:8px 0">词义：{{curword.word}} | 作者：{{curword.author}} | 入库时间：{{curword.time}}</div>
                    </div>
                </div>
                <div class="layui-card chat-show">
                    <div class="layui-card-header">输入</div>
                    <div class="layui-card-body">
                        <form class="layui-form" action="javascript:void(0);">
                            <div class="layui-form-item layui-form-text">
                                <div class="layui-input-block">
                                    <textarea maxlength="2000" id="txt" name="txt" lay-verify="required" placeholder="请输入内容,最大限制2000字。" class="layui-textarea"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="pear-btn pear-btn-success login" lay-submit lay-filter="chat">立即提交</button>
                                    <button type="reset" class="pear-btn">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="layui-col-md8">
                <div class="layui-card content">
                    <div class="layui-card-header">
                        分词结果
                    </div>
                    <div class="layui-card-body result">
                        <span v-for="item in allwords" :style="{ color: item.color}">{{item.word}} / </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

   
    <script type="text/javascript" src="component/layui/layui.js"></script>
    <script type="text/javascript" src="component/pear/pear.js"></script>
    <script type="text/javascript" src="component/js/vue.js"></script>
    <script type="text/javascript" src="component/js/libgif.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                interpunction: [],
                curword: { gif: 'example_gifs/成绩.gif', word: '成绩', author: '张三四', color: 'green',time:'2023-03-30' },
                words: []
            },
            computed: {
                allwords: function () {
                    return this.words;
                }
            }
        });
        //
        function InitSuperGif(i) {
            app.curword = app.words[i];
            if (app.interpunction.indexOf(app.curword.word) != -1) {
                i = i + 1;
                if (i < app.words.length) InitSuperGif(i);
                return;
            }
            //
            let gifDiv = document.getElementById("example1");
            gifDiv.innerHTML = '';
            if (app.curword.gif == '') {
                gifDiv.innerHTML = '<div style="font-size:40px;padding-top:80px;text-align:center">' + app.curword.word + '</div>';
                setTimeout(function () {
                    i = i + 1;
                    if (i < app.words.length) InitSuperGif(i);
                }, 1000);
            }
            else {
                //gif播放
                let gifImg = document.createElement('img')
                gifImg.setAttribute('rel:animated_src', app.curword.gif)
                gifImg.setAttribute('rel:auto_play', '0') // 设置自动播放属性
                gifDiv.appendChild(gifImg)
                // 通过异步函数，获取gif文件
                var sup1 = new SuperGif({
                    gif: gifImg,
                    progressbar_foreground_color: "#9254de",
                    progressbar_background_color: "#ebeef5",
                    progressbar_height: 4,
                    on_end: () => {                        
                        sup1.pause()
                        i = i + 1;
                        if (i < app.words.length) InitSuperGif(i);
                    }
                });
                sup1.load(function () { sup1.play(); });
            }
        }
        //
        layui.use(['layer', 'form', 'loading', 'http'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var loading = layui.loading;
            var http = layui.http;
            $('#txt').focus();
            loading.Load(5, '加载中...');
            //获取忽略词
            http.ajax({
                url: '/YuLiaoK/getSingleConfig?key=interpunction',
                type: 'get'
            }).done(function (res) {
                app.interpunction = res.result;
            })
            //
            form.on('submit(chat)', function (data) {
                //
                $('.result').html('');
                $('#example1').html('');
                app.words = [];
                loading.block({ type: 5, elem: '.chat-show', msg: '请稍等...' });
                //
                var arr = data.field.txt.split('\n');
                post(arr, 0);
                $('#txt').val('').focus();
                return false;
            });

            async function post(arr, i) {
                var txt = arr[i];
                if (txt != '') {
                    var res = await http.ajax({
                        url: '/YuLiaoK/FenCi',
                        data: JSON.stringify({ txt: txt })
                    });
                    app.words.push(...res.result);
                }
                //
                i = i + 1;
                if (i < arr.length) {
                    post(arr, i);
                }
                else {                    
                    InitSuperGif(0);
                    loading.blockRemove(".chat-show", 1000);
                }
            }

            loading.loadRemove(500);
        });
    </script>
</body>
</html>
